<template>
	<view class="resource-list">
		<!-- 文章 -->
		<view class="resource-item" @click="navToResourceDetail(resource)" v-if="resource.resourceType=='1'"
			v-for="resource in resourceList">
			<div class="item-left">
				<img class="resource-image article-image" :src="resource.coverImageUrl">
				</img>
			</div>
			<div class="resource-type resource-type-article"><span class="iconfont icon-preview"></span>
			</div>
			<div class="item-right">
				<div class="name">{{resource.resourceName}}</div>
				<div class="unit">阅读{{resource.numberOfReading}}次 | 共{{resource.subResourceUnit}}篇</div>
				<div class="bottom">
					<div class="level" v-if="item.accessEnabled" v-for="(item,index) in resource.accessList">
						{{item.userLevelDTO.name}}
					</div>
					<div class="price" v-if="resource.purchaseEnabled">单购￥{{resource.salePrice}}</div>
				</div>
			</div>
		</view>
		<!-- 音频 -->
		<view class="resource-item" @click="navToResourceDetail(resource)" v-if="resource.resourceType=='2'"
			v-for="resource in resourceList">
			<div class="item-left">
				<img class="resource-image audio-image" :src="resource.coverImageUrl">
				</img>
			</div>
			<div class="resource-type resource-type-audio"><span class="iconfont icon-audio"></span>
			</div>
			<div class="item-right">
				<div class="name">{{resource.resourceName}}</div>
				<div class="unit">播放{{resource.numberOfReading}}次 | 共{{resource.subResourceUnit}}集</div>
				<div class="bottom">
					<div class="level" v-if="item.accessEnabled" v-for="(item,index) in resource.accessList">
						{{item.userLevelDTO.name}}
					</div>
					<div class="price" v-if="resource.purchaseEnabled">单购￥{{resource.salePrice}}</div>
				</div>
			</div>
		</view>
		<!-- 视频 -->
		<view class="resource-item" @click="navToResourceDetail(resource)" v-if="resource.resourceType=='3'"
			v-for="resource in resourceList">
			<div class="item-left">
				<img class="resource-image video-image" :src="resource.coverImageUrl">
				</img>
			</div>
			<div class="resource-type resource-type-video"><span class="iconfont icon-video"></span>
			</div>
			<div class="item-right">
				<div class="name">{{resource.resourceName}}</div>
				<div class="unit">播放{{resource.numberOfReading}}次 | 共{{resource.subResourceUnit}}集</div>
				<div class="bottom">
					<div class="level" v-if="item.accessEnabled" v-for="(item,index) in resource.accessList">
						{{item.userLevelDTO.name}}
					</div>
					<div class="price" v-if="resource.purchaseEnabled">单购￥{{resource.salePrice}}</div>
				</div>
			</div>
		</view>
		<!-- 电子书 -->
		<view class="resource-item" @click="navToResourceDetail(resource)" v-if="resource.resourceType=='4'"
			v-for="resource in resourceList">
			<div class="item-left">
				<img class="resource-image ebook-image" :src="resource.coverImageUrl">
				</img>
			</div>
			<div class="resource-type resource-type-ebook"><span class="iconfont icon-ebook"></span>
			</div>
			<div class="item-right">
				<div class="name">{{resource.resourceName}}</div>
				<div class="unit">阅读{{resource.numberOfReading}}次 | 共{{resource.subResourceUnit}}章</div>
				<div class="bottom">
					<div class="level" v-if="item.accessEnabled" v-for="(item,index) in resource.accessList">
						{{item.userLevelDTO.name}}
					</div>
					<div class="price" v-if="resource.purchaseEnabled">单购￥{{resource.salePrice}}</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	name: 'resource-list'
	export default {
		components: {

		},
		data() {
			return {
				resource: {},
				columnClass: 'goods-item-col-' + this.cols
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint',
				'applicationConfig'
			])
		},
		props: {
			resourceList: {
				type: Array,
				default: function() {
					return [];
				}
			},
			cols: {
				type: Number,
				default: 1
			}
		},
		methods: {
			...mapMutations([]),
			navToResourceDetail(item) {
				let id = item.resourceUuid;
				uni.navigateTo({
					url: '/pages/resource/resource-detail?id=' + id
				})
			},
			stopPrevent() {}
		},
	}
</script>

<style lang='scss'>
	.resource-list {

		.resource-item {
			position: relative;
			display: flex;
			background: #fff;
			border-radius: 20px;
			margin: 10upx;
			padding: 10upx;

			.item-left {
				height: 150upx;
			}

			.item-right {
				display: flex;
				flex-direction: column;
				margin-left: 20upx;
				justify-content: start;
				overflow: hidden;

				.name {
					color: $font-color-dark;
					font-weight: bold;
					font-size: $font-lg;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.unit {
					color: $font-color-light;
					font-size: $font-sm;
				}

				.bottom {
					display: flex;
					flex-direction: row;
					justify-content: left;
					margin-top: auto;
					align-items: center;

					.level {
						background: $bg-color-dark;
						opacity: .5;
						color: #fff;
						padding: 4upx;
						margin-right: 2upx;
						border-radius: 10upx;
						font-size: $font-sm - 6upx;
					}

					.price {
						color: $font-color-light;
						font-size: $font-sm;
						padding-left: 20upx;
					}

				}
			}

			.resource-type {
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40upx;
				height: 40upx;
				background: #000;
				border-radius: 50%;
				border: solid .5px #fff;
				opacity: .6;

				.iconfont {
					color: #fff;
					font-size: $font-lg+4upx;
				}
			}

			.resource-type-article {
				top: 70upx;
				left: 90upx;
			}

			.resource-type-audio {
				top: 70upx;
				left: 90upx;
			}

			.resource-type-video {
				top: 70upx;
				left: 90upx;
			}

			.resource-type-ebook {
				top: 70upx;
				left: 46upx;
				width: 36upx;
				height: 36upx;

				.iconfont {
					font-size: $font-sm;
				}
			}

			.resource-image {
				border-radius: 20upx;
			}

			.article-image {
				width: 200upx;
				height: 150upx;
			}

			.audio-image {
				width: 200upx;
				height: 150upx;
			}

			.video-image {
				width: 200upx;
				height: 150upx;
			}

			.ebook-image {
				width: 100upx;
				height: 150upx;
				border-radius: 0;
			}

		}
	}
</style>